<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
		<title>MicroWebSrv2 - WebSockets Module</title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<script language="javascript">

		var output;

		function init()
		{
			output = document.getElementById("output");
			testWebSocket();
		}

		function testWebSocket()
		{
			var scheme, defaultPort
			if (window.location.protocol == 'https:')
			{
				scheme = 'wss:';
				defaultPort = 443;
			}
			else
			{
				scheme = 'ws:';
				defaultPort = 80;
			}
			var wsUri = scheme + '//' + window.location.hostname;
			if (window.location.port !== defaultPort)
				wsUri += ':' + window.location.port;
			writeToScreen("Connecting to " + wsUri + "...")
			websocket           = new WebSocket(wsUri);
			websocket.onopen    = function(evt) { onOpen    (evt) };
			websocket.onclose   = function(evt) { onClose   (evt) };
			websocket.onmessage = function(evt) { onMessage (evt) };
			websocket.onerror   = function(evt) { onError   (evt) };
		}

		function onOpen(evt)
		{
			writeToScreen("<strong>-- CONNECTED --</strong>");
			SendMsg("Hello world :)");
			SendMsg("This is a WebSocket test");
			SendMsg("(with a text frame encoded in UTF-8)");
			setTimeout( function() { websocket.close() }, 3000 )
		}

		function onClose(evt)
		{
			writeToScreen("<strong>-- DISCONNECTED --</strong>");
		}

		function onMessage(evt)
		{
			writeToScreen('MSG FROM SERVER : <span style="color: blue;">' + evt.data + '</span>');
		}

		function onError(evt)
		{
			writeToScreen('ERROR : <span style="color: red;">' + evt.data + '</span>');
		}

		function SendMsg(msg)
		{
			writeToScreen('MSG TO SERVER : <span style="color: green;">' + msg + '</span>');
			websocket.send(msg);
		}

		function writeToScreen(s)
		{
			var pre = document.createElement("p");
			pre.style.wordWrap = "break-word";
			pre.innerHTML = s;
			output.appendChild(pre);
		}

		window.addEventListener("load", init, false);

	</script>

	<body>
	  <h1>MicroWebSrv2 - WebSockets Module</h1>
	  <div id="output"></div>
	</body>

</html>
